<template>
  <div class="animal-simple-card-box">
    <!--    <vs-card type="2" class="card">-->
    <!--      <template #title>-->
    <!--        <h3>-->
    <!--          {{ value.animal.name || '未知'}}-->
    <!--          <i class="iconfont icon-nan" style="color: deepskyblue;" v-show="showSex &&value.sex===1"></i>-->
    <!--          <i class="iconfont icon-nvshi" style="color: hotpink" v-show="showSex &&value.sex===0"></i>-->
    <!--        </h3>-->

    <!--      </template>-->
    <!--      <template #img>-->
    <!--        <el-image :class="['animal-simple-img',computeStatusClass]" fit="cover" :src="value.animal.image">-->

    <!--        </el-image>-->
    <!--      </template>-->
    <!--      <template #text >-->
    <!--        <div>-->
    <!--          {{ value.school.schoolName || '未知' }}({{value.campus.name}}) | {{ value.area.name || '未知' }}-->
    <!--        </div>-->
    <!--      </template>-->
    <!--      <template #interactions>-->
    <!--        <vs-button size="mini" danger >-->
    <!--          <i class='iconfont icon-aixin2' style="font-size: 12px"></i>-->
    <!--          <span >-->
    <!--            100-->
    <!--          </span>-->
    <!--        </vs-button>-->
    <!--        <vs-button size="mini"  warn>-->
    <!--          <i class='el-icon-star-off'></i>-->
    <!--          <span >-->
    <!--            54-->
    <!--          </span>-->
    <!--        </vs-button>-->
    <!--      </template>-->
    <!--    </vs-card>-->
    <el-skeleton
        :loading="loading"
        :throttle="500"
        animated
        style="width: 100%"
    >
      <template slot="template">
        <el-skeleton-item
            style="width: 100%;min-height: 200px"
            variant="image"
        />
        <div class="flex-col-center" style="padding: 14px 0;">
          <el-skeleton-item style="width: 50%;" variant="h3"/>
        </div>
      </template>
      <div :style="{'--active-color':color}" class="animal-simple-card-body">
        <el-image :class="['animal-simple-img',computeStatusClass]" :src="value.animal.image" fit="cover">

        </el-image>

        <!--      遮罩信息层-->
        <div class="animal-simple-content flex-col-center">
          <div class="flex-row-center">
            <div class="name" @click="handleClickInfo"> {{ value.animal.name || '未知' }}</div>
            <div style="margin-left: 5px" v-html="computedSex">
            </div>
          </div>
          <div class="sc-name">
            {{ value.school.schoolName }}
          </div>
        </div>
      </div>
      <div class="animal-simple-card-bottom flex-row-end">
        <FunctionButtonBox></FunctionButtonBox>
      </div>

      <template>

      </template>
    </el-skeleton>

  </div>
</template>

<script>
import FunctionButtonBox from "@/components/button/FunctionButtonBox.vue";

export default {
  name: "AnimalSimpleCard",
  components: {FunctionButtonBox},
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: 'teal'
    },
    value: {
      type: Object,
      require: true,

    }
  },
  data() {
    return {}
  },
  methods: {
    handleClickInfo() {
      this.$router.push("/index/animal/info/" + this.value.animal.id)
    },
  },
  computed: {
    computeStatusClass() {

      if (this.value.animal.status && this.value.animal.status === 0) {
        return 'death-status'
      } else {
        return ''
      }
    },
    computeAnimalStatus() {

      let status = this.value.animal.status | 3
      switch (status) {
        case 0:
          return '💔逝世'
        case 1:
          return '健康';
        case 2:
          return '生病';
        default:
          return '未知'
      }
    },
    computedSex() {
      let sex = this.value.animal.sex

      switch (sex) {
        case 0:
          return '<span style="color:hotpink">♀️</span>';
        case 1:
          return '<span style="color:deepskyblue">♂️</span>';
        default:
          return '未知'
      }
    }
  }
}
</script>

<style scoped lang="less">
.animal-simple-card-box {
  //background-color: #eae9e9;
  border-radius: 5px;
  overflow: hidden;
  min-width: 150px;
  //border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .card {
    width: 100%;
    height: 100%;
  }

  .animal-simple-img {
    width: 100%;
    height: 200px;

  }

  .animal-simple-card-body {
    position: relative;

    .animal-simple-content {
      position: absolute;
      width: 100%;
      height: 0;
      left: 0;
      bottom: 0;
      transition: all 0.3s;
      overflow: hidden;
      color: transparent;
      box-shadow: 0 -2px 12px 0px rgba(0, 0, 0, 0.5);

      .name {
        font-size: 25px;
        margin-bottom: 5px;
        cursor: pointer;
        caret-color: transparent;
      }

      .sc-name {

      }
    }

    &:hover {
      .animal-simple-content {
        height: 50%;
        min-height: 50px;
        color: whitesmoke;
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
  }

}

.death-status {
  //变灰
  filter: grayscale(1);
}

</style>